/**
 * Created by xxx on 2017年9月27日.
 */
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            parentPhone: suixun.urlpara('parentPhone'),
            listDate: [],
            noData: false
        }
    },
    componentDidMount: function () {
        var svar = this;
        if(svar.state.parentPhone != ''){
            var param="param={";
            param = getJsonDataNotEmpty(param,"peopletel",""+svar.state.parentPhone+"");
            param += "}";
            suixun.showLoding();//隐藏加载中
            suixun.ajax(serverUrl+'/deviceManage/queryDevicesByPeopletel.json',param,"get",function(data){
                suixun.hideLoding();//隐藏加载中
                if(data.code == 200){
                    if(data.info != null){
                        svar.setState({listDate:data.info});
                    }else{
                        svar.setState({noData:true});
                    }
                }else{
                    suixun.alert(data.msg);
                    svar.setState({noData:true});
                }
            });
        }else{
            suixun.hideLoding();//显示加载中
            svar.setState({noData:true});
        }
    },
    /**
     * 去详情
     * @returns {XML}
     */
    goDetails: function (imei){
        window.open('./parentDeviceDetails.html?imei='+imei);
    },
    render: function () {
        var svar = this;
        var listDates = this.state.listDate.map(function (data,index) {
            var paystatus = '未激活';
            switch(data.paystatus){
                case '2':
                    paystatus = '已激活';
                    break;
                case '3':
                    paystatus = '已缴费';
                    break;
                case '4':
                    paystatus = '已过期';
                    break;
                case '5':
                    paystatus = '已回收';
                    break;
                default:
                    paystatus = '未获取到数据';
                    break;
            }
            return (
                <div className="baby-list">
                    <div className="info">
                        <div className="info-list">
                            <div className="info">
                                <span className="title">设备类型：</span>
                                <span className="value">{data.devicetypename==null?'未获取到数据':data.devicetypename}</span>
                            </div>
                            <div className="info">
                                <span className="title">设备手机号：</span>
                                <span className="value number">{data.telephone==null?'未获取到数据':data.telephone}</span>
                            </div>
                            <div className="info">
                                <span className="title">设备IMEI号：</span>
                                <span className="value number">{data.mdtid==null?'未获取到数据':data.mdtid}</span>
                            </div>
                        </div>
                        <div className="info-list">
                            <div className="info">
                                <span className="title">绑定时间：</span>
                                <span className="value number">{data.starttime==null?'未获取到数据':data.starttime}</span>
                            </div>
                            <div className="info">
                                <span className="title">缴费状态：</span>
                                <span className="value">{paystatus}</span>
                            </div>
                            <div className="info">
                                <span className="title">设备有效期：</span>
                                <span className="value number">{data.endtime==null?'未获取到数据':data.endtime}</span>
                            </div>
                        </div>
                        <div className="info-list">
                            <div className="info">
                                <span className="title">学校：</span>
                                <span className="value">{data.schoolname==null?'未获取到数据':data.schoolname}</span>
                            </div>
                            <div className="info">
                                <span className="title">班级：</span>
                                <span className="value">{data.classname==null?'未获取到数据':data.classname}</span>
                            </div>
                            <div className="info">
                                <span className="title">宝贝名称：</span>
                                <span className="value">{data.studentname==null?'未获取到数据':data.studentname}</span>
                            </div>
                        </div>
                    </div>
                    <div className="more" onClick={svar.goDetails.bind(this,data.mdtid)}>更多&nbsp;>></div>
                </div>
            )
        });
        return (
            <div className="tableManage-body parentDeviceList-page">
                <header>
                    <div className="header-left">
                        <div className="header-left-studentInfo">设备列表</div>
                    </div>
                </header>
                <div className="parentDeviceList-body">
                    {
                        listDates
                    }
                    {this.state.noData==true?<div className="tableNoData" style={{border:'1px solid #dddddd'}}>{tableNoDataCount}</div>:''}
                    {/*<div className="baby-list">*/}
                        {/*<div className="info">*/}
                            {/*<div className="info-list">*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">设备类型：</span>*/}
                                    {/*<span className="value">智能学生证</span>*/}
                                {/*</div>*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">设备手机号：</span>*/}
                                    {/*<span className="value number">12345678987</span>*/}
                                {/*</div>*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">设备IMEI号：</span>*/}
                                    {/*<span className="value number">78956245896547</span>*/}
                                {/*</div>*/}
                            {/*</div>*/}
                            {/*<div className="info-list">*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">绑定时间：</span>*/}
                                    {/*<span className="value number">2017-9-27</span>*/}
                                {/*</div>*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">缴费状态：</span>*/}
                                    {/*<span className="value">已缴费</span>*/}
                                {/*</div>*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">设备有效期：</span>*/}
                                    {/*<span className="value number">2018-12-30</span>*/}
                                {/*</div>*/}
                            {/*</div>*/}
                            {/*<div className="info-list">*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">学校：</span>*/}
                                    {/*<span className="value">高新区随寻小学</span>*/}
                                {/*</div>*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">班级：</span>*/}
                                    {/*<span className="value">3年级二班</span>*/}
                                {/*</div>*/}
                                {/*<div className="info">*/}
                                    {/*<span className="title">宝贝名称：</span>*/}
                                    {/*<span className="value">大葵花</span>*/}
                                {/*</div>*/}
                            {/*</div>*/}
                        {/*</div>*/}
                        {/*<div className="more" onClick={this.goDetails.bind(this)}>更多&nbsp;>></div>*/}
                    {/*</div>*/}
                </div>
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }
});
ReactDOM.render(
    <Main />,
    document.getElementById('tableManage')
);